<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @click="backOne">
				<image src="../../static/img/common/back.png" mode=""></image>
			</view>
			<view class="top-bar-center">
				{{chat.name}}
			</view>
			<view class="top-bar-right" @tap="todetal">
				<image :src="chat.avatar" mode=""></image>
			</view>
		</view>
		<view class="main">
			<scroll-view scroll-y="true" :scroll-with-animation="dh" class="scoll-y"
				:style="'height:'+height+'rpx;'+'padding-bottom:'+(bottombarheight)+'px'"
				:scroll-into-view="scrollintoview"  :refresher-enabled="true"
				@refresherrefresh="loadpage" refresher-background="transparent" refresher-default-style="none"
				:refresher-triggered="triggered">
				<view class="loading" v-if="loading">
					<image src="../../static/img/chatroom/loading.png" :animation="animationData" v-if="!istop"></image>
					<text v-else>没有更多了</text>
				</view>
				<view :class="item.user==id?'msg my':'msg'" v-for=" (item,index) in message" :key="index"
					:id="'y'+item.tip">
					<view class="time" v-if="item.ontime">
						{{dataformate(item.time)}}
					</view>
					<view class="msg-item">
						<view class="avatar">
							<image :src="item.img"></image>
						</view>
						<view class="msg-content">
							<!-- 文字 -->
							<view class="text" v-if="item.types==0">
								{{item.message}}
							</view>
							<!-- 图片 -->
							<view class="img" v-if="item.types==1">
								<image :src="item.message" mode="widthFix" @tap="previewimg(item.message)"></image>
							</view>
							<!-- 语音 -->
							<view class="voice text" v-if="item.types ==2" :style="'width:'+item.message.time*6+'rpx'"
								@tap="palyvoice(item.message.voice)">
								<text>{{item.message.time}}''</text>
								<image src="../../static/img/a/voice.png"></image>
							</view>
							<!-- 地图 -->
							<view class="map" v-if="item.types===3" @tap="openlocation(item.message)">
								<view class="map-name">
									{{item.message.name}}
								</view>
								<view class="map-address">
									{{item.message.address}}
								</view>
								<image src="../../static/img/chatroom/map.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="after" id="end">
					
				</view> -->
			</scroll-view>
		</view>
		<print class="P-bottom" :height.sync="bottombarheight" @print="enter" ref="print"></print>

	</view>
</template>

<script>
	import print from '@/components/print/print.vue'
	import {
		mapState
	} from 'vuex'
	// import datas from '@/common/js/datas.js';
	const innerAudioContext = uni.createInnerAudioContext();
	import {
		dataformate,
		spacTime
	} from '@/common/js/DateFormate.js'
	export default {
		data() {
			return {
				user: {
					name: '小虎'
				},
				message: [],
				imgMsg: [],
				// 接受用户输入
				bottombarheight: 0,
				height: 0,
				scrollintoview: '',
				time: '',
				animationData: '',
				loading: false,
				end: true,
				currentNum: '',
				dh: true,
				valve: false,
				//群或好友 group or user
				type: '',
				page: 1,
				pagesize: 8,
				istop: false,
				triggered: false
			};
		},
		components: {
			print
		},
		methods: {
			backOne() {
				uni.navigateBack()
			},
			// 获取消息列表
			async getmessage() {
				if (this.valve) return
				this.valve = true
				if (this.type == 1) {
					var {
						data
					} = await this.request({
						url: '/msg/user',
						data: {
							uid: this.id,
							fid: this.chat._id,
							page: this.page,
							pagesize: this.pagesize
						}
					})
				}else{
					var {
						data
					} = await this.request({
						url: '/msg/group',
						data: {
							gid: this.chat.groupId,
							page: this.page,
							pagesize: this.pagesize
						}
					})
				}
				if (data.status == 201) {
					this.istop = true
				} else if (data.status == 200) {
					var message = data.data.reverse()
					message = spacTime(message);
					this.message = [...message, ...this.message]
				}
				this.valve = false
			},
			// 时间格式化
			dataformate,
			// 预览图片
			previewimg(url) {
				uni.previewImage({
					urls: this.imgMsg,
					current: url,
					// 	longPressActions: {
					// 		itemList: ['发送给朋友', '保存图片', '收藏'],
					// 		success: function(data) {
					// 			console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 		},
					// 		fail: function(err) {
					// 			console.log(err.errMsg);
					// 		}
					// 	}
				});
			},
			// 发送消息,获得两个参数e：message，t：types
			enter(e, t) {
				if (t == 1) {
					this.imgMsg.push(e)
				}
				if (this.type == 1) {
					var data = {
						user: this.chat._id,
						send: this.id,
						message: e,
						types: t,
						time: new Date()
					}
				} else {
					var data = {
						userId: this.id,
						groupId: this.chat.groupId,
						message: e,
						types: t,
						time: new Date()
					}
				}
				this.sendmsg(data)
				// if (data.time - this.message[this.message.length - 1].time <= 60 * 1000) {
				// 	data.ontime = false
				// } else {
				// 	data.ontime = true
				// }
				// // console.log(data);
				// this.message.push(data)
				// this.end = !this.end
			},
			async sendmsg(e) {
				if (this.type == 1) {
					var {
						data
					} = await this.request({
						url: '/msg/user',
						method: "POST",
						data: {
							...e
						}
					})
				} else {
					var {
						data
					} = await this.request({
						url: '/msg/group',
						method: "POST",
						data: {
							...e
						}
					})
				}
				if (data.status == 200) {
					var msg = data.data
					msg.img = this.avatar
					if (new Date(msg.time) - new Date(this.message[this.message.length - 1].time) <= 60 * 1000) {
						msg.ontime = false
					} else {
						msg.ontime = true
					}
					this.message.push(msg)
					this.end = !this.end
				}

			},
			// 获取屏幕高度单位rpx（除去状态栏）
			getheight() {
				var data = uni.getSystemInfoSync()
				var w = data.windowWidth
				var h = data.windowHeight
				var sh = data.statusBarHeight
				h = (h - sh) / (w / 750) - 88
				this.height = h
			},
			// 播放
			palyvoice(e) {
				innerAudioContext.src = e;
				innerAudioContext.play();
			},
			covers(e) {
				return [{
					latitude: e.latitude,
					longitude: e.longitude,
					iconPath: '../../static/img/chatroom/localtion.png'
				}]
			},
			openlocation(e) {
				uni.openLocation({
					latitude: e.latitude,
					longitude: e.longitude,
					name: e.name,
					address: e.address,
					success: function() {
						console.log('success');
					}
				});
			},
			loadpage() {				
				this.triggered = true
				setTimeout(()=>{
					this.triggered = false
				})
				var tip = 'y'+this.message[0].tip
				this.page = this.page + 1
				this.loading = true
				var animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'step-start',
				})
				let i = 1
				var loading = setInterval(function() {
					animation.rotate(30 * i).step()
					this.animationData = animation.export()
					i++
				}.bind(this), 100)
				setTimeout(() => {
					this.getmessage()
					clearInterval(loading)
					this.loading = false
				}, 1000)
				
			},
			todetal() {
				if (this.type == 2) {
					uni.navigateTo({
						url: '/pages/groupdetail/groupdetail?id=' + this.chat.groupId
					})
				} else {
					uni.navigateTo({
						url: '/pages/userdetai/userdetai?id=' + this.chat._id
					})
				}
			},
			fresh() {
				console.log(1);
			}
		},
		async onLoad(e) {
			this.type = e.type
			this.getheight()
			this.getmessage()
			if(this.type==1){
				await this.request({
					url:'/read',
					method:'POST',
					data:{
						uid:this.id,
						fid:this.chat._id
					}
				})
			}
			// this.loadpage()
			// this.$nextTick(()=>{
			// 	this.getViewHeight()
			// })
		},
		watch: {
			end() {
				// this.scrolltop = 0
				this.$nextTick(() => {
					// this.getitemHeight()
					// console.log(1);
					// this.scrolltop = 9999

					this.dh = true
					this.scrollintoview = 'y' + this.message[this.message.length - 1].tip

				})

			},
			bottombarheight() {
				setTimeout(() => {
					this.dh = true
					setTimeout(() => {
						this.scrollintoview = '';
					}, 10)
					this.scrollintoview = 'y' + this.message[this.message.length - 1].tip
				}, 100)

				// this.scrolltop = this.scrolltop + 1
			},

		},
		computed: {
			...mapState(['chat', 'id', 'avatar'])
		}
	}
</script>

<style lang="scss">
	@import "../../common/css/base.scss";

	.content {
		background-color: #F4F4F4;
	}

	.top-bar {
		@include top-bar(#F4F4F4);

		.top-bar-left {
			padding: 0;
			padding-top: 20rpx;
			box-sizing: border-box;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.top-bar-center {
			font-size: 40rpx;
			color: #272832;
		}

		.top-bar-right {
			padding: 10rpx 0;

			image {
				width: 68rpx;
				height: 68rpx;
				border-radius: 16rpx;
			}
		}
	}

	.main {
		padding: 88rpx 32rpx 0;
		box-sizing: border-box;
	}

	.scoll-y {
		.loading {
			padding: 10rpx;
			text-align: center;
			image {
				width: 40rpx;
				height: 40rpx;
				padding: 10rpx;
			}
		}

		box-sizing: border-box;
		position: relative;

		.msg {
			&:last-of-type {
				.msg-item {
					margin-bottom: 0;
					padding-bottom: 15rpx;
				}
			}

			.time {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: rgba(39, 40, 50, 0.30);
				padding-bottom: 40rpx;
				line-height: 40rpx;
			}

			.msg-item {
				display: flex;
				margin-bottom: 40rpx;
				justify-content: flex-start;

				.avatar {
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 20rpx;
					}

				}

				.msg-content {
					margin: 0 20rpx;

					.text {
						max-width: 480rpx-24rpx-22rpx;
						background-color: #fff;
						border-radius: 0 20rpx 20rpx;
						padding: 18rpx 22rpx 18rpx 24rpx;
						font-size: 32rpx;
						color: #272832;
						line-height: 60rpx;
					}

					.img {
						image {
							width: 284rpx;
							border-radius: 20rpx;
						}
					}

					.voice {
						display: flex;
						flex-direction: row-reverse;
						align-items: center;
						justify-content: flex-end;
						min-width: 100rpx;
						max-width: 360rpx;

						text {
							margin-left: 5rpx;
						}

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.map {
						background-color: #fff;
						width: 460rpx;
						border-radius: 10rpx 10rpx 0 0;

						.map-name {
							font-size: 32rpx;
							color: #272832;
							line-height: 44rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.map-address {
							font-size: 24rpx;
							color: rgba(39, 40, 50, .4);
							margin-bottom: 8rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						image {
							width: 460rpx;
						}

						map {
							width: 460rpx;
						}
					}
				}
			}
		}

		.my {
			.msg-item {
				flex-direction: row-reverse;

				.msg-content {
					.text {
						border-radius: 20rpx 0 20rpx 20rpx;
						background-color: #ffe431;
					}

					.voice {
						flex-direction: row;

						// justify-content: flex-end;
						text {
							margin-left: 0;
							margin-right: 5rpx;
						}

						image {
							transform: rotate(180deg);
						}
					}
				}
			}
		}
	}

	.P-bottom {
		position: fixed;
		bottom: 0;
	}
</style>
